<template>
	<el-dialog :title="dialog.title" v-model="dialog.isShowDialog" append-to-body :close-on-click-modal="false" width="500px">
		<el-form ref="formRef" :model="ruleForm" :rules="rules" label-width="auto">
			<el-form-item label="审核结果" prop="status">
				<el-radio-group v-model="ruleForm.status">
					<el-radio :label="2">同意</el-radio>
					<el-radio :label="3">拒绝</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item v-if="ruleForm.type !== 4" label="打款凭证" prop="voucher">
				<image-upload-cOS v-model="ruleForm.voucher" path="finance" ref="imageUploadVoucherRef" />
			</el-form-item>
			<el-form-item v-if="ruleForm.status === 3" label="拒绝原因" prop="fail_reason">
				<el-input
					type="textarea"
					v-model="ruleForm.fail_reason"
					maxlength="200"
					show-word-limit
					placeholder="请输入原因"
					clearable
					:autosize="{ minRows: 2, maxRows: 6 }"
				/>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button type="primary" :loading="dialog.submitLoading" @click="onSubmitForm">确定</el-button>
			<el-button @click="onCancel">取消</el-button>
		</template>
	</el-dialog>
</template>

<script>
import { ElMessage } from 'element-plus';
import { supplierWithdrawalApi } from '/@/api/admin';

const SupplierWithdrawalApi = supplierWithdrawalApi();
export default {
	data() {
		return {
			dialog: {
				isShowDialog: false,
				type: '',
				title: '财务提现审核',
				submitLoading: false,
			},
			ruleForm: {
				payment_id: '',
				type: '',
				status: 2,
				fail_reason: '',
			},
			rules: {
				fail_reason: [{ required: true, message: '拒绝原因不能为空', trigger: ['blur'] }],
			},
		};
	},
	methods: {
		// 提交
		onSubmitForm() {
			this.$refs.formRef.validate((valid) => {
				if (!valid) return;
				this._supplierWithdrawalExamine(this.ruleForm)
			});
		},
		// 取消
		onCancel() {
			this.dialog = {
				isShowDialog: false,
				type: '',
				title: '财务提现审核',
				submitLoading: false,
			};
		},

		/********** 方法事件 **********/
		openDialog(params, fn) {
			this.dialog.isShowDialog = true;
			this.callback = fn;
			this.$nextTick(() => {
				this.$refs.formRef.resetFields();
				params.type !== 4 && this.$refs.imageUploadVoucherRef.reset();
				this.ruleForm.type = params.type;
				this.ruleForm.withdrawal_id = params.id;
			});
		},

		/********** 网络请求 **********/
		// 审核供应商货款
		_supplierWithdrawalExamine(params) {
			SupplierWithdrawalApi.supplierWithdrawalExamine(params)
				.then(() => {
					ElMessage.success('操作成功');
					this.onCancel();
					this.callback();
				})
				.catch(() => {
					this.dialog.submitLoading = false;
				});
		},
	},
};
</script>
